<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>设备报废</el-breadcrumb-item>
            <el-breadcrumb-item>报废记录</el-breadcrumb-item>
          </el-breadcrumb>
          <el-card>
            <el-row :gutter="30">
              <el-col :span="8">
                  <el-input v-model="input" placeholder="请输入设备名称" clearable>
                    <el-button slot="append" icon="el-icon-search" ></el-button>
                  </el-input>
              </el-col>
              <el-col :span="12">
                  <el-button type="primary" @click="addDialogVisible = true">添加设备信息</el-button>
              </el-col>
            </el-row>
              <el-table  height=360px stripe border style="width: 100%"
              :data="tableData.filter(data => !input || data.name.toLowerCase().includes(input.toLowerCase()))">
                  <el-table-column prop="id" label="id" width="100" ></el-table-column>
                  <el-table-column prop="aid" label="编号" width="100"></el-table-column>
                  <el-table-column prop="name" label="设备名称" ></el-table-column>
                  <el-table-column prop="scraptime" label="报废时间" width="200"></el-table-column>
                  <el-table-column prop="depreci" label="折旧" ></el-table-column>
                  <el-table-column prop="states" label="状态(报废)" width="180">
                      <template slot-scope="scope">
                          <el-switch v-model="scope.row.states" disabled></el-switch>
                        </template>
                  </el-table-column>
                  <el-table-column label="操作" width="180px">
                      <template slot-scope="scope">
                          <el-tooltip  effect="dark" content="修改信息" placement="top" :enterable="false">
                              <el-button type="primary" icon="el-icon-edit" size="mini"  @click="showEditDialog(scope.row.aid)"></el-button>
                          </el-tooltip>
                          <el-tooltip  effect="dark" content="删除信息" placement="top" :enterable="false">
                              <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.aid)"></el-button>
                          </el-tooltip>
                      </template>
                  </el-table-column>
              </el-table>
        </el-card>

        <!-- 添加设备 -->
        <el-dialog title="添加设备信息" :visible.sync="addDialogVisible">
          <el-form :model="ruleForm" ref="addFromRef" status-icon :rules="addFromRules"  label-width="120px" >
              <el-form-item label="编号" prop="aid">
                <el-select v-model="ruleForm.aid" @change="valueChange">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
              </el-form-item>
              <el-form-item label="设备名称" prop="name">
                <el-input v-model="ruleForm.name" disabled></el-input>
              </el-form-item>
              <el-form-item label="报废时间" prop="scraptime">
                <el-date-picker v-model="ruleForm.scraptime" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
              </el-form-item>
              <el-form-item label="折旧" prop="depreci">
                <el-input v-model="ruleForm.depreci"></el-input>
              </el-form-item>
              <el-form-item label="状态(报废)" prop="states">
                <el-switch v-model="ruleForm.states" disabled></el-switch>
              </el-form-item>
            </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
          </div>
        </el-dialog>
        
        <!-- 修改信息 -->
        <el-dialog title="修改设备信息" :visible.sync="editDialogVisible">
            <el-form :model="editForm" ref="addFromRef" status-icon :rules="addFromRules"  label-width="120px" >
              <el-form-item label="编号" prop="aid">
                <el-select v-model="editForm.aid" @change="manaChange">
                      <el-option
                        v-for="item in seletions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
              </el-form-item>
              <el-form-item label="设备名称" prop="name">
                <el-input v-model="editForm.name" disabled></el-input>
              </el-form-item>
              <el-form-item label="报废时间" prop="scraptime">
                <el-date-picker v-model="editForm.scraptime" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
              </el-form-item>
              <el-form-item label="折旧" prop="depreci">
                <el-input v-model="editForm.depreci"></el-input>
              </el-form-item>
              </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editUserInfo">确 定</el-button>
          </div>
        </el-dialog>
  </div>
</template>

<script>
  export default {
      
      data() {
         
          return {
              input: '',
              tableData:[],
              addDialogVisible: false,
              editDialogVisible: false,
              ruleForm:{
                  id: '',
                  aid: '',
                  name: '',
                  scraptime: '',
                  depreci: '',
                  states: false,
                  price: '',
                  facturer: '',
                  outtime: '',
                  buytime: ''
              },
              addFromRules: {
                  aid:[
                      { required: true, message: '请选择设备编号', trigger: 'blur' }
                  ],
                  depreci: [
                      { required: true, message: '请输入折旧', trigger: 'blur' },
                      { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
                  ],
                  scraptime: [
                      { required: true, message: '请输入报废时间', trigger: 'blur' }
                  ],
              },
              options:[],
              editForm: {},
              obj: {},
              seletions: []

          }
      },
      created() {
          this.getUserinfo();   
      },
      methods: {
          async getUserinfo(){
              const {data: resfalse} = await this.$http.get('http://127.0.0.1:8181/cate/findstates/' + false)
              const {data: restrue} = await this.$http.get('http://127.0.0.1:8181/cate/findstates/' + true)
            //   console.log(res)
              this.tableData = resfalse
            //   console.log(restrue)
              for(let i = 0; i<restrue.length; i++){
                this.options.push({value:restrue[i].aid, label: restrue[i].aid})
              }
          },
          async valueChange(){
            if(this.ruleForm.aid != undefined){
              const {data: jieguo} = await this.$http.get('http://127.0.0.1:8181/cate/findByAid/' + this.ruleForm.aid)
              // console.log(jieguo[0])
              this.ruleForm = jieguo[0]
              this.ruleForm.states =false
              // this.ruleForm.id =jieguo[0].id
              // this.ruleForm.name = jieguo[0].name
            }
          },
          async manaChange(){
            if(this.editForm.aid != undefined){
              const {data: jieguo} = await this.$http.get('http://127.0.0.1:8181/cate/findByAid/' + this.editForm.aid)
              // console.log(jieguo[0])
              this.editForm = jieguo[0]
              // this.ruleForm.id =jieguo[0].id
              // this.ruleForm.name = jieguo[0].name
            }
          },
          submitForm(){
              this.$refs.addFromRef.validate(async valid => {
                  if (valid) {
                         const res = await this.$http.put('http://127.0.0.1:8181/cate/update', this.ruleForm)
                        //  console.log(res)
                          if (res.data == 'success') {
                              this.addDialogVisible = false
                              this.tableData = []
                              this.getUserinfo()
                              return this.$message.success('添加设备信息成功！')
                          }
                              return this.$message.error('设备信息添加失败！') 
                      
                  }
              })
          },
          async removeUserById(aid){
              const confirmresult = await this.$confirm('此操作将永久删除该报废记录, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
              }).catch(err =>{
                  err
              })
              if (confirmresult != 'confirm') {
                  return this.$message('已经取消了删除!')
              }

              const {data: res} = await this.$http.get('http://127.0.0.1:8181/cate/findByAid/' + aid)
              // console.log(res[0])
              this.obj = res[0]
              this.obj.states = true
              // console.log(this.obj)
              const que = await this.$http.post('http://127.0.0.1:8181/cate/saveCate', this.obj)
              if (que.status != 200) {
                  return  this.$message.error('删除记录失败')
              }
                  this.$message.success('删除记录成功')
                  this.tableData = []
                  this.obj = {}
                  this.getUserinfo()
          },
          async showEditDialog(aid){
              this.editDialogVisible =true
              this.seletions = []
              const {data: resp} = await this.$http.get('http://127.0.0.1:8181/cate/findall')
              for(let i = 0; i<resp.length; i++){
                  this.seletions.push({value:resp[i].aid, label: resp[i].aid})
              }
              // console.log(resp)
              const {data: res} = await this.$http.get('http://127.0.0.1:8181/cate/findByAid/' + aid)
              
              this.editForm =res[0]
          },
          editUserInfo(){
              this.$refs.addFromRef.validate(async valid => {
                  if (valid) {
                         const res = await this.$http.put('http://127.0.0.1:8181/cate/update', this.editForm)
                        //  console.log(res)
                          if (res.data == 'success') {
                              this.editDialogVisible = false
                              this.tableData = []
                              this.getUserinfo()
                              return this.$message.success('信息修改成功！')
                          }
                              return this.$message.error('信息修改失败！') 
                  }
              })
          }
      
      }
  }
</script>
<style scoped>

</style>